<template>
  <div class="user-publish">
    <!-- 头部NavBar -->
    <div class="navBarBox">
      <NavBar title="我的发布" routerLink="/users">
        <div></div>
      </NavBar>
    </div>
    <template v-if="publishList && publishList.length > 0">
      <!-- 宠物发布卡片 -->
      <div class="publish-item">
        <div
          class="publish-list"
          v-for="item in publishList"
          :key="item.pet_id"
          @click="handleRouter(item.pet_id)"
        >
          <RouterLink to="">
            <van-image
              class="item-img"
              :src="item.pet_images"
              fit="cover"
              alt=""
            />
            <div class="item-card">
              <p class="card-variety">{{ item.pet_variety }}</p>
              <div class="delete-icon" @click="delPublish(item.pet_id)">
                <van-icon name="delete-o" color="orange" size="1.3rem" />
              </div>
              <p class="card-address">{{ item.pet_giveaddress }}</p>
              <div class="card-digital">
                <span>{{ item.pet_collect_count }} 收藏</span>
                <span>{{ item.pet_createtime.split("T")[0] }}</span>
              </div>
            </div>
          </RouterLink>
          <!--送养状态-->
          <div
            class="sendStatus"
            :style="{
              color: sendColor(item.pet_collar_status, item.pet_give_status),
            }"
            @click.stop="
              handleSend(
                item.pet_id,
                item.pet_collar_status,
                item.pet_give_status
              )
            "
          >
            {{ sendStatus(item.pet_collar_status, item.pet_give_status) }}
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <Empty hint="还没有发布哦" />
    </template>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar/NavBar.vue";
import Empty from "@/components/Empty.vue";
import { ref } from "vue";
import { useStore } from "vuex";
import { getPublishListApi, delPublishApi, postSuccess } from "@/api/user";
import { Dialog, Toast } from "vant";
import { useRouter } from "vue-router";
export default {
  name: "UserPublish",
  components: { NavBar, Empty },
  setup() {
    const { publishList, GetPublishList } = usePublishList();
    GetPublishList();
    //删除发布
    const delPublish = (id) => {
      Dialog.confirm({
        title: "删除发布",
        message: "您确定要删除这条发布内容吗？",
      })
        .then(() => {
          // 发起请求
          delPublishApi(id)
            .then((res) => {
              console.log(res);
              // 如果状态为 200 表示删除成功
              if (res.status === 200) {
                console.log(res.msg);
                const index = publishList.value.findIndex(
                  (item) => item.pet_id === id
                );
                console.log(index);
                publishList.value.splice(index, 1);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          // on cancel
        });
    };
    //送养状态 (未有预领养) (待确认送养)  (完成送养)
    const sendStatus = (collor, give) => {
      if (give == "false") {
        return "未有预领养";
      } else if (give == "true" && collor == "false") {
        return "待确认送养";
      } else if (give == "true" && collor == "true") {
        return "完成送养";
      }
    };
    //状态颜色
    const sendColor = (collor, give) => {
      let status = sendStatus(collor, give);
      if (status == "未有预领养") {
        return "#ccc";
      } else if (status == "待确认送养") {
        return "#e98a1f";
      } else if (status == "完成送养") {
        return "#44c62c";
      }
    };
    //确认送养
    const handleSend = (id, collor, give) => {
      let status = sendStatus(collor, give);
      if (status == "待确认送养") {
        Dialog.confirm({
          title: "送养提示",
          message: "你确定想要送养这个宠物吗？",
        })
          .then(() => {
            postSuccess(id).then((res) => {
              if (res.status == 200) {
                Toast("送养成功");
                // emit('getAdoptPetList')
                GetPublishList();
              }
            });
          })
          .catch(() => {});
      } else {
        if (status == "未有预领养") {
          Toast("你的宠物还没有被人预约领养");
        } else {
          Toast("你的宠物已经被你确认送养");
        }
      }
    };
    //跳转详情
    const router = useRouter();
    const handleRouter = (id) => {
      router.push(`/petTable/${id}`);
    };
    return {
      publishList,
      delPublish,
      sendStatus,
      handleSend,
      sendColor,
      handleRouter,
    };
  },
};
// 获取我的发布列表数据
function usePublishList() {
  const store = useStore();
  const publishList = ref();
  // 发起请求 获取数据
  const GetPublishList = () => {
    getPublishListApi(store.state.user.profile.user_id).then((res) => {
      console.log(res, "发布列表");
      publishList.value = res.data;
    });
  };

  return {
    publishList,
    GetPublishList,
  };
}
//
</script>

<style scoped lang="less">
.user-publish {
  padding-bottom: 2.5rem;
}
// 头部NavBar
.navbarBox {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 2.5rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: #dfe5eb;
}
.publish-item {
  margin-top: 3rem;
}
.publish-list {
  position: relative;
  height: 7rem;
  margin: 0.8rem;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 0.5rem;
  border: 1px solid #fff;
  //送养状态
  .sendStatus {
    position: absolute;
    top: 0.75rem;
    right: 3.6rem;
    color: #ccc;
    font-size: 0.9rem;
    border-bottom: 1px solid;
  }
  .item-img {
    float: left;
    width: 6rem;
    height: 6rem;
    margin: 0.5rem 0.6rem;
    //  border-radius: 0.5rem;
  }
  .item-card {
    position: relative;
    .delete-icon {
      position: absolute;
      right: 1.2rem;
      bottom: 4.3rem;
    }
    .card-variety {
      color: #323232;
    }
    .card-address {
      font-size: 0.9rem;
      color: #979797;
    }
    .card-digital {
      display: flex;
      justify-content: space-between;
      :nth-child(1) {
        color: #e29a51;
        font-size: 0.9rem;
        margin-top: -0.2rem;
      }
      :nth-child(2) {
        font-size: 0.8rem;
        color: #897a7a;
        margin-right: 0.4rem;
      }
    }
  }
}
</style>
